<template>
  <div>
    <div>
      <el-row>
        <el-col>
          <span>1.疼痛（25分）</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.lysholm_radio1">
              <el-radio :label="25">膝关节无疼痛</el-radio>
              <el-radio :label="20">膝关节剧烈发力时有间歇疼痛</el-radio>
              <el-radio :label="15">膝关节剧烈发力时有显著疼痛</el-radio>
              <el-radio :label="10">步行超过2km后膝关节有显著疼痛</el-radio>
              <el-radio :label="5">步行少于2km后膝关节有显著疼痛</el-radio>
              <el-radio :label="0">膝关节有连续疼痛</el-radio>
              <el-input
                placeholder="备注"
                v-model="pgForm.lysholm_input1"
                clearable>
              </el-input>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>2.不安定度（25分）</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.lysholm_radio2">
              <el-radio :label="25">膝关节从无失控现象</el-radio>
              <el-radio :label="20">运动或剧烈发力时膝关节罕有失控现象</el-radio>
              <el-radio :label="15">运动或剧烈发力时膝关节频繁失控</el-radio>
              <el-radio :label="10">日常活动时膝关节偶然失控</el-radio>
              <el-radio :label="5">日常活动膝关节经常失控</el-radio>
              <el-radio :label="0">每走一步膝关节就会失控</el-radio>
              <el-input
                placeholder="备注"
                v-model="pgForm.lysholm_input2"
                clearable>
              </el-input>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>3.闭锁感（15分）</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.lysholm_radio3">
              <el-radio :label="15">膝关节无闭锁感或束缚感</el-radio>
              <el-radio :label="10">膝关节有持续束缚感，但没有闭锁感</el-radio>
              <el-radio :label="6">膝关节偶尔有闭锁感</el-radio>
              <el-radio :label="2">膝关节时常有闭锁感</el-radio>
              <el-radio :label="0">膝关节不能运动</el-radio>
              <el-input
                placeholder="备注"
                v-model="pgForm.lysholm_input3"
                clearable>
              </el-input>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>4.肿胀度（10分）</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.lysholm_radio4">
              <el-radio :label="10">膝关节从不肿胀</el-radio>
              <el-radio :label="6">剧烈发力时膝关节肿胀</el-radio>
              <el-radio :label="2">正常发力时膝关节肿胀</el-radio>
              <el-radio :label="0">膝关节经常肿胀</el-radio>
              <el-input
                placeholder="备注"
                v-model="pgForm.lysholm_input4"
                clearable>
              </el-input>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>5.跛行（5分）</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.lysholm_radio5">
              <el-radio :label="5">不跛行</el-radio>
              <el-radio :label="3">有轻微跛行或周期性跛行</el-radio>
              <el-radio :label="0">有剧烈而频繁的跛</el-radio>
              <el-input
                placeholder="备注"
                v-model="pgForm.lysholm_input5"
                clearable>
              </el-input>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>6.楼梯攀爬（10分）</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.lysholm_radio6">
              <el-radio :label="10">不会因为膝关节问题而出现爬楼梯困难</el-radio>
              <el-radio :label="6">因为膝关节的原因，爬楼有轻度困难</el-radio>
              <el-radio :label="2">因为膝关节的原因，爬楼梯每次只能迈一步</el-radio>
              <el-radio :label="0">因为膝关节的原因，完全不能爬楼梯</el-radio>
              <el-input
                placeholder="备注"
                v-model="pgForm.lysholm_input6"
                clearable>
              </el-input>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>7.蹲姿（5分）</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.lysholm_radio7">
              <el-radio :label="5">下蹲无任何问题</el-radio>
              <el-radio :label="4">因为膝关节的原因，下蹲有轻度困难</el-radio>
              <el-radio :label="2">下蹲不能超过90度</el-radio>
              <el-radio :label="0">因为膝关节的原因，下蹲根本不能完成</el-radio>
              <el-input
                placeholder="备注"
                v-model="pgForm.lysholm_input7"
                clearable>
              </el-input>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>8.使用支撑物（5分）</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.lysholm_radio8">
              <el-radio :label="5">不用任何支撑物</el-radio>
              <el-radio :label="3">需用拐杖或腋杖</el-radio>
              <el-radio :label="0">由于膝关节的原因，支撑身体重量是不可能的</el-radio>
              <el-input
                placeholder="备注"
                v-model="pgForm.lysholm_input8"
                clearable>
              </el-input>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div>
            <span style="display: inline;">总分 </span>
            <el-input placeholder="" v-model="pgForm.lysholm_input9" readonly style="width: 20%;"></el-input>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "lysholm",
  title: "Lysholm膝关节评分",
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
  },
  props: {
    fromdata:{},
    istrans:false,
  },
  data() {
    return {
      pgForm: {
        lysholm_radio1: '',
        lysholm_radio2: '',
        lysholm_radio3: '',
        lysholm_radio4: '',
        lysholm_radio5: '',
        lysholm_radio6: '',
        lysholm_radio7: '',
        lysholm_radio8: '',

        lysholm_input1: '',
        lysholm_input2: '',
        lysholm_input3: '',
        lysholm_input4: '',
        lysholm_input5: '',
        lysholm_input6: '',
        lysholm_input7: '',
        lysholm_input8: '',
        lysholm_input9: '',
      }
    }
  },
  computed:{
    sum(){
      return (this.pgForm.lysholm_radio1)*1 + (this.pgForm.lysholm_radio2)*1 + (this.pgForm.lysholm_radio3)*1 + (this.pgForm.lysholm_radio4)*1 + (this.pgForm.lysholm_radio5)*1 + (this.pgForm.lysholm_radio6)*1 + (this.pgForm.lysholm_radio7)*1 + (this.pgForm.lysholm_radio8)*1
    }
  },
  watch:{
    sum(val){
      this.pgForm.lysholm_input9 = val
    }
  }
}
</script>

<style scoped>

.el-radio-group {
  padding: 20px 20px;
}

.el-row {
  margin: 10px 0;
  padding: 20px 10px;
  background-color: #f9f9f9;
}
.el-radio {
  display: block;
  margin-bottom: 15px;
}
</style>
